<template>
  <el-descriptions title="预存款明细">
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="预存款">18100000000</el-descriptions-item>
    <el-descriptions-item label="享受折扣">苏州市</el-descriptions-item>
    <el-descriptions-item label="会员等级">
      <el-tag size="small">V1</el-tag>
    </el-descriptions-item>
    <el-descriptions-item><el-button type="primary" @click="show=true">充值</el-button></el-descriptions-item>
  </el-descriptions>
  <el-button type="primary" @click="qiehuan">切换</el-button>
  <div v-if="jiLu">
    <el-empty :image-size="200" description="你并没有充值记录"></el-empty>
  </div>
  <div v-if="jiLu2">
    <el-table :data="studentList" style="width: 100%" border stripe>
      <el-table-column fixed prop="id" label="编号"/>
      <el-table-column prop="name" label="时间"/>
      <el-table-column prop="birthday" label="余额明细"/>
      <el-table-column prop="sex" label="描述"/>
      <el-table-column prop="sex" label="充值/消费">
        <template #default = scope>
          <el-button link type="danger" size="small" @click="del(scope.row)">删除</el-button>
          <el-button link type="primary" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      v-model="show"
      title="Tips"
      width="30%"
  >
    <span>充值充值</span>
    <template #footer>
      <span>
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="show = false">
         返回
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      jiLu:true,
      jiLu2:false,
    }
  },
  methods:{
    qiehuan(){
      if (this.jiLu){
        this.jiLu = false
      }else {
        this.jiLu = true
      }
      if (this.jiLu2){
        this.jiLu2 = false
      }else {
        this.jiLu2 = true
      }
    }
  }
}
</script>

<style scoped>

</style>